<template>
    <div class="star" :class="starType">
        <span v-for="(itemClass,index) in itemClasses" :key="index"  :class="itemClass" class="star-item"></span>
    </div>
</template>

<script>
    const LENGTH=5,
          CLS_ON='on',
          CLS_HALF='half',
          CLS_OFF='off';
    export default {
        name: "star",
        props:{
            size:{
         type:Number
            },//星星尺寸
            score:{
                type:Number
            },//星星数量
        },
        computed:{
            starType(){
                return 'star-'+this.size;
            },
            itemClasses(){
                let result =[];
                let score=Math.floor(this.score*2)/2;
                let hasDecimal = score % 1 !==0;
                let integer = Math.floor(score);
                for(let i=0;i<integer;i++){
                    result.push(CLS_ON);
                }
                if(hasDecimal){
                    result.push(CLS_HALF);
                }
                while(result.length<LENGTH){
                    result.push(CLS_OFF);
                }
                return result
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../stylus/border.styl"
       .star
         font-size:0
         .star-item
           display:inline-block
           background-repeat:no-repeat
         &.star-48
           .star-item
             width:20px
             height:20px
             margin-right:22px
             background-size:20px 20px
             &:last-child
              margin-right:0
             &.on
              bg-image('star48_on')
             &.half
              bg-image('star48_half')
             &.off
              bg-image('star48_off')
         &.star-36
          .star-item
             width:15px
             height:15px
             margin-right:6px
             background-size:15px 15px
             &:last-child
               margin-right:0
             &.on
               bg-image('star36_on')
             &.half
               bg-image('star36_half')
             &.off
               bg-image('star36_off')
         &.star-24
           .star-item
             width:10px
             height:10px
             margin-right:3px
             background-size:10px 10px
             &:last-child
                 margin-right:0
             &.on
                 bg-image('star24_on')
             &.half
                 bg-image('star24_half')
             &.off
                 bg-image('star24_off')

</style>